<%@ page language="java" pageEncoding="utf-8"%>
<%@ include file="/common/taglibs.jsp"%>
<%
	try {
		if (pageContext.findAttribute("me") == null) {
			response.sendRedirect(request.getContextPath()
					+ "/login.jsp");
			return;
		}
%>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript"
	src="${ ctx}/scripts/jquery/jquery-1.8.2.min.js"></script>
<script type="text/javascript"
	src="${ ctx}/scripts/jquery/jquery-ui-1.8.24.custom.min.js"></script>
<script type="text/javascript"
	src="${ ctx}/scripts/jquery/jqueryui.bannerize.js"></script>
<script type="text/javascript"
	src="${ ctx}/scripts/jquery/jquery.qtip-1.0.0-rc3.js"></script>

<script type="text/javascript" src="${ ctx}/scripts/article.js"></script>
<link href="${ ctx}/skins/home.css" rel="stylesheet" type="text/css" />
<!-- 博文主体样式 -->
<link href="${ ctx}/skins/picturemodel.css" rel="stylesheet"
	type="text/css" />
<!-- 博文中多幅图片模板设计 -->

<style type="text/css">
.page-content {
	width: 1200px;
	margin: 0 auto;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	position: relative;
	padding-top: 20px;
}

#column-main {
	width: 665px;
	float: left;
	border-left: dotted 0px;
	background-color: rgba(232, 240, 238, 0.16);
	padding-left: 10px;
	border-left: dotted 0px;
	/*length> <length> <length>? <length>? || <color>：阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色*/
	padding-right: 20px;
	-moz-box-shadow: 0 10px 20px #b0b3b6;
	/*我们在这里设置阴影，同时设置padding-right使得其偏向于右边，（注：需要设置boreder当然需要设置其宽度为0使其看不见）*/
	-webkit-box-shadow: 0 10px 20px #b0b3b6;
	box-shadow: 0 10px 20px #b0b3b6;
}

#column-left {
	margin-right: 14px;
	padding-top: 0px;
	padding-left: 0px;
	padding-bottom: 50px;
	width: 160px;
	float: left;
	margin-left: 50px;
}

#column-right {
	width: 250px;
	float: right;
}

.mark-star {
	float: right;
	position: absolute;
	padding-left: 590px;
	margin-top: -6px;
}

.nupt-line-buttom {
	height: 10px;
	margin-left: -57px;
	background: url('${ctx}/img/feed-line.png') -612px bottom no-repeat;
}

.nupt-line-top {
	height: 10px;
	margin-left: -2px;
	background: url('${ctx}/img/feed-line.png') 0 0 no-repeat;
}

.feed-com {
	position: relative;
	zoom: 1;
	border: dotted 0px;
	padding: 1px 1px;
	background-color: rgba(245, 245, 245, 0.4);
	float: left;
}

.feed-com .feed-ft-triangle {
	width: 15px;
	height: 15px;
	position: relative;
	top: -15px;
	left: 555px;
	z-index: 1;
	background: url('${ctx}/img/feed-triangle.png') no-repeat;
}

.feed-comment-input {
	margin-top: -10px;
	width: 576px;
	border-radius: 4px;
	overflow: hidden;
	color: #666;
	background: #f7f8f8;
	border: 1px solid #C9CACC;
	border-bottom: 1px solid #B1B3B5;
	box-shadow: 0 1px 1px #C9CACC;
	height: 28px;
	font-size: large;
}

.article-title {
	text-align: center;
	font-size: 16px;
	color: rgb(37, 31, 65);
	font-weight: 900;
}

.blog-mark-star {
	float: right;
	position: absolute;
	padding-left: 390px;
	margin-top: -1px;
	width: 20px;
}
</style>

<!--  设置公共变量   -->
<script type="text/javascript">
   var ctx = "${ctx}";  
   var userId = "${me.id}";  
   var username = "${me.username}";
</script>


<script type="text/javascript">



$(document).ready(function() {
	 readyArticle();   //加载博文功能的article.js脚本实现
	 <c:if test="${param.blogId!=null }">
	//加载真正的博文数据,这样做的目的：为了解决网速慢的情况，这样做可以做真正的动态加载数据
     $.post("${ctx}/common/RequestBlog.jsp", { "actionSerial": 2,blogId: ${param.blogId},"description":"第一次xx博客的博文" },
                function(data){
                         $("#feed-list").html(data);
                         avatarInfo();
     });
     </c:if>
     <c:if test="${param.blogId==null }"> 
     $.post("${ctx}/common/RequestBlog.jsp", { "actionSerial": 2,blogId: ${blog.id},"description":"第一次xx博客的博文" },
             function(data){
                      $("#feed-list").html(data);
                      avatarInfo();
  }); </c:if>
	 
	 
     //下面我们做一个 每当页面到达页底的时候自动加载数据，效果类似于 新浪微博
		$(window).bind('scroll',function(){
				 if($(window).scrollTop()+$(window).height()>=$(document).height()){   //如果到达页底的话，两者应该相等
					 
					 //获取当前载入数据中，博文最旧id  其实就是Id最小的博文
		 		     var lastArticleId  =  $(".feed-photo:last-child").attr("data-articleid");
		 		    <c:if test="${param.blogId!=null }">
					 $.post("${ctx}/common/RequestBlog.jsp", { "actionSerial": 3,blogId: ${param.blogId},"count":3,"form":"blogIndex","lastArticleId":lastArticleId,
					 		                                      "description":"获取博客首页更多文章数据" },
	                         function(data){
					 		     if((/pop-content/g).test(data))                        	  
	                                $("#feed-list").append(data);
					 		        avatarInfo();
	                      });
					 </c:if>
					  <c:if test="${param.blogId==null }">
						 $.post("${ctx}/common/RequestBlog.jsp", { "actionSerial": 3,blogId: ${blog.id},"count":3,"form":"blogIndex","lastArticleId":lastArticleId,
						 		                                      "description":"获取博客首页更多文章数据" },
		                         function(data){
						 		     if((/pop-content/g).test(data))                        	  
		                                $("#feed-list").append(data);
						 		        avatarInfo();
		                      });
						 </c:if>
					 
				 }
		}); 
     
     
		/*
		 * 博文添加收藏、取消收藏
		 */
		$(".blog-mark-star").live("click",function() {
				var status = parseInt($(this).attr("data-status"));
				if (status == 0) {
					$(this).attr("src","${ctx}/img/star_on.gif");
					$(this).attr("data-status","1");
				} else {
					$(this).attr("src","${ctx}/img/star_off.gif");
					$(this).attr("data-status","0");
				}
				$.post(
					"${ctx}/common/ProcessingClass.jsp",
					{
						"actionSerial" : 3,
						"blogId" : parseInt($(this).attr("data-blogId")),
						 status : status,
						"description" : "博客的关注、取消关注的操作"
					}, function(data) {
					});
			});
     
     
    
}

);
    
</script>
<c:if test="${param.blogId!=null }">
	<nativeSql:sqlQueryForUnique
		sql="select * FROM t_blog  where  f_id =${param.blogId }" id="blog" />
</c:if>
<c:if test="${param.blogId==null }">
	<nativeSql:sqlQueryForUnique
		sql="select *  FROM t_blog  where  f_id =${blog.id }" id="blog" />
</c:if>
<title>博客首页---${blog.f_blog_name }</title>
<meta name="keywords" content="document share, blog, njupt" />
<meta name="description" content="http://www.njupt.net 分享平台博客来记录我们的心声" />
</head>
<body id="page-home">
	<%@ include file="/common/header.jsp"%>
	<div class='page-content'>

		<!-- 做边框个人信息 -->
		<div id='column-left'><%@ include
				file="/common/left_blog_index.jsp"%></div>

		<!-- 中间部分：发表博文、博文浏览 -->
		<div id="column-main">
			<c:if test="${blog.f_manager_id!=me.id&&blog.f_type=='private'}">
				<div style="border-bottom: dotted 1px;">
					<span style="padding-right: 18px; font-size: 18px;"> <a
						href="${ctx }/index.jsp"> 首&nbsp;&nbsp;页</a> <span
						style="font-size: 12px;">>></span>文章列表 <span
						style="font-size: 12px; font-style: italic; font-family: fantasy;">(from
							${blog.f_blog_name })</span> </span>

					<nativeSql:sqlQueryForUnique
						sql="select count(*) as cnt from t_blog_mark where f_blog_id = ${blog.f_id} and f_marker_id = ${me.id }"
						id="marksCnt" />
					<c:if test="${marksCnt.cnt == 0 }">
						<img src="${ctx }/img/star_off.gif" class="blog-mark-star"
							data-status="0" data-blogId="${blog.f_id}"></img>
					</c:if>
					<c:if test="${marksCnt.cnt > 0 }">
						<img src="${ctx }/img/star_on.gif" class="blog-mark-star"
							data-status="1" data-blogId="${blog.f_id}"></img>
					</c:if>

				</div>
			</c:if>

			<c:if test="${blog.f_manager_id==me.id||blog.f_type=='public'}">
				<!-- 发表博文的头部 -->
				<ul id="publishPostBar" class="m-nav2">
					<nativeSql:sqlQueryForUnique
						sql="select f_picture_appended as avatarId from app_user  where f_id = ${me.id }"
						id="meavatar" />
					<li><a class="publishlink-user" href="javascript:void(0);"><img
							alt="头像"
							src="${ctx}/user/file.action?method:previewPic&fileId=${meavatar.avatarId }"></img>
					</a></li>
					<li><a class="publishlink-text"
						href="${ctx }/blog/newArticleForm.jsp?type=text&blogId=${param.blogId}"><img alt="文字"
							src="${ctx }/img/eheader1.png"></img> </a></li>
					<li><a class="publishlink-picture"
						href="${ctx }/blog/newArticleForm.jsp?type=picture&blogId=${param.blogId}"><img
							alt="图片" src="${ctx }/img/eheader2.png"></img> </a></li>
					<li><a class="publishlink-music"
						href="${ctx }/blog/newArticleForm.jsp?type=music&blogId=${param.blogId}"><img
							alt="音乐" src="${ctx }/img/eheader3.png"></img> </a></li>
					<li><a class="publishlink-video"
						href="${ctx }/blog/newArticleForm.jsp?type=video&blogId=${param.blogId}"><img
							alt="视频" src="${ctx }/img/eheader4.png"></img> </a></li>
				</ul>
			</c:if>

			<!-- 博客的正文 -->
			<div class="feed-list" id="feed-list">
				<center>
					<img style="padding-top: 36px; padding-bottom: 36px;"
						src="${ctx }/img/loading.gif">
				</center>





			</div>

			<br> <br>

		</div>
		<div id='column-right'><%@ include file="/common/right_blog.jsp"%></div>

	</div>


	<div style="clear: both;"></div>



	<%@ include file="/common/footer.jsp"%>
	<%
		} catch (Exception e) {
			e.printStackTrace();
		}
	%>
</body>
</html>